<script setup lang="ts">
// 同el-table的属性和事件。额外提供分页配置pagination对象，对象的属性同el-pagination的属性和事件。pageSize和pageNum请通过table组件实例获取,初始值请通过table的属性传递过来。
// el-table的事件直接使用@elEvent="xxx"，即正常绑定即可，$attrs可以接收到。
// 通过属性绑定事件需要加上on前缀，例如在传递el-pagination的size-change事件时，需要这样写 onSizeChange:(size:number)=>{}。
// 需要注意的是只有一级表头才支持插槽渲染，因为超过一级表头的插槽没法在myTable组件填回去。但是没关系，可以使用渲染函数。
import {ref} from "vue"
import myElTableCol from './myTableCol.vue'

const props=withDefaults(defineProps<{ 
	columns: { prop: string; label: string; [key: string]: any }[]
	data?:{[key: string]: any }[]
	height?:string
	pagination?:{[key: string]: any }
	initPageSize?:number
	initPageNum?:number
 }>(),{data:[] as any,initPageSize:20,initPageNum:1})

const pageSize=ref(props.initPageSize)
const pageNum=ref(props.initPageNum)

function reset(){
	pageNum.value=1
	pageSize.value=props.initPageSize
}

defineExpose({
	pageNum,
	pageSize,
    reset,
})
// https://cn.vuejs.org/guide/extras/render-function.html#passing-slots 可以研究一下官网，更加好的了解插槽

</script>

<template>
	<div class="my-table">
		<div class="my-table-content" :style="{height:height?height:'auto'}">
				<el-table v-bind="$attrs" :data="data">
				<div slot="empty" v-if="!$attrs['empty-text']">
					<slot name="empty">暂无数据</slot>
				</div>
				<myElTableCol v-for="item in columns" :key="item.prop" :item="item">
					<template #[item.prop]="scope:any">
						<slot :name="item.prop" v-bind="scope"></slot>
					</template>

					<template #[`${item.prop}-header`]="scope:any">
						<slot :name="item.prop + '-header'" v-bind="scope"></slot>
					</template>
				</myElTableCol>
			</el-table>
	 </div>
   
	<div class="my-table-pagination"  style="margin: 10px 0;display: flex;justify-content: flex-end;"  v-if="pagination">
		<el-pagination v-bind="pagination"  :current-page="pagination.current" :page-size="pagination.size" v-if="pagination.controlled" />
		<el-pagination v-bind="pagination"  v-model:current-page="pageNum" v-model:page-size="pageSize" v-else />
	 </div>
	</div>
</template>

<style lang="scss" scoped>

</style>
